<template>
  <div class="container-fluid ">

    <TopBar></TopBar>



    <div class="box-bg">

      <!--  -->

      <div v-show="captchShow">

        <div class="mask" @click="captchShow = !captchShow"></div>

        <div class="captch-box ">

          <div style="width: 100%;height:auto;display:flex;">

            <img @click="getCaptch()" :src="captcha" style="width: 110px;height:auto;margin:auto" alt="code">

          </div>

          <br>
 


          <div class="input-group mb-3">

            <input type="text" v-model="emailForm.captcha" class="form-control" :placeholder="$t('registerPage.captcha')"
              aria-label="Recipient's username" aria-describedby="button-addon2">

            <button class="btn btn-primary" @click="sendEmailCode()" type="button" id="button-addon2">{{ $t('registerPage.check') }}</button>

          </div>

        </div>



      </div>

      <!--  -->

      <div class="left-box">

        <img src="../assets/login_or_reg/favsion.png" alt="PASSLINK.CN">

        <br><br><br>

        <p>PASSLINK

          <br>

          <span>{{ $t('registerPage.passlink') }}</span>

        </p>

      </div>

      <div class="right-box">

        <div class="blur-bg"></div>

        <div class="input-box">

          <div>

            <h3 style="font-weight: bold;">{{ $t('registerPage.reg') }}</h3>

            <router-link to="/login">{{ $t('registerPage.useCount') }}</router-link>

          </div>

          <br>

          <form>

            <div>

              <div class="input-group mb-3">



                <input type="email" v-model="emailForm.email" class="form-control" :placeholder="$t('registerPage.email')"
                  aria-describedby="inputGroup-sizing-default">

              </div>

              <div class="input-group mb-3">



                <input type="text" v-model="regForm.username" class="form-control" :placeholder="$t('registerPage.userName')"
                  aria-describedby="inputGroup-sizing-default">

              </div>

              <div class="input-group mb-3">



                <input type="password" v-model="regForm.password" class="form-control" :placeholder="$t('registerPage.password1')"
                  aria-describedby="inputGroup-sizing-default" name="password1">

              </div>

              <div class="input-group mb-3">



                <input type="password" v-model="regForm.password_two" class="form-control" :placeholder="$t('registerPage.password2')"
                  aria-describedby="inputGroup-sizing-default" name="password2">

              </div>

              <div class="input-group mb-3">

                <input type="text" class="form-control" v-model="regForm.emailCode" :placeholder="$t('registerPage.captcha')">

                <button class="btn btn-dark" type="button" id="button-addon2" @click="getEmailCode()">{{ $t('registerPage.getCode') }}</button>

              </div>

              <div class="d-grid gap-2">



                <button class="btn btn-primary" type="button" @click="toRegister()">{{$t('registerPage.reg')}}</button>

              </div>

            </div>

          </form>

        </div>

      </div>





    </div>





  </div>
</template>
<script setup lang="ts">
import { Md5 } from 'ts-md5';
import { ref, reactive, onMounted } from "vue"
import { authCaptcha, authEmailCode, authRegister } from '../api/auth/index'
// import { useRouter } from 'vue-router'

import toast from '../components/Toast/index'
const captchShow = ref(false);
const captcha = ref("")

const emailForm_satus = ref(false);
// const router = useRouter()

const regForm = reactive({
  "username": "",
  "password": "",
  "emailCode": "",
  "password_two": ""
})

const emailForm = reactive({
  "email": "",
  "captcha": "",
})


function checkData() {
  if (emailForm.email.length < 6) {
    toast.showToast({ msg: "邮箱格式错误！！！", type: "error", mask: false })
    return false;
  }
  if (regForm.password.length < 8 || regForm.username.length < 4 || regForm.password_two.length < 8) {
    toast.showToast({ msg: "用户名或密码格式错误！！！", type: "error", mask: false })
    return false;
  }
  if (regForm.password.length != regForm.password_two.length || regForm.password_two !== regForm.password) {
    toast.showToast({ msg: "两次密码不匹配！！！", type: "error", mask: false })
    return false;
  }
  return true;
}
//获取图片
async function getCaptch() {
  try {

    const res: any = await authCaptcha()
    captcha.value = res.data.data.captcha

  } catch (error) {
    // 处理错误
    toast.showToast({ msg: "验证码获取错误！！！", type: "error", mask: false })
  }
}


//获取邮箱验证码
function getEmailCode() {
  //检测数据
  if (!checkData()) {
    return
  }
  //显示图片验证码
  captchShow.value = true;

}


//发送邮箱验证码
function sendEmailCode() {

  if (emailForm.captcha.length !== 4) {
    //不符合要求重新获取
    toast.showToast({ msg: "验证码错误！！！", type: "error", mask: false })
    getCaptch()
    return;
  }
  captchShow.value = false;

  authEmailCode(emailForm);


}

//注册
function toRegister() {
  // 判断是否已发送邮箱
  if (!emailForm_satus) {
    toast.showToast({ msg: "邮件发送失败！！！", type: "error", mask: false })
    return
  }
  //检测数据
  if (!checkData()) {
    return
  }
  //MD5加密


const md5:any = new Md5()
md5.appendAsciiStr(regForm.password)
const hash = md5.end()
// 哈希值在这里使用
regForm.password = hash
    console.log(regForm)
    authRegister(regForm);
    regForm.password = "";
    regForm.password_two = "";

}
getCaptch();
onMounted(() => {
 
})
</script>
<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  background-color: rgba(44, 43, 43, 0.6);
}

.captch-box {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  z-index: 3000;
  display: block;
  padding: 5px;
  width: 300px;
  height: auto;
  background: $passlink-font-color-black;
  border-radius: 10px;
}

.container-fluid {
  background-color: $passlink-bg-color;
  height: 100vh;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  width: $passlink-center-width;
  .box-bg {
    flex: 1;
    /* 填充剩余空间 */
    background-image: url('../assets/login_or_reg/register.png');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin: auto;
    width: 100%;
    height: fit-content;
    display: flex;

    .left-box {
      position: absolute;
      left: 50px;
      top: 100px;
      width: $passlink-center-width*0.5;
      padding: 20px;
      color: $passlink-font-color-white;

      p {
        text-align: left;
        font-size: $passlink-font-size64;
        font-weight: bold;

        span {
          font-size: $passlink-font-size32;
          font-weight: lighter;
        }
      }

      img {
        width: 150px;
        height: 150px;
        margin: auto;
      }
    }

    .right-box {
      width: $passlink-center-width*0.5;
      padding: 20px;
      color: $passlink-font-color-white;

      .blur-bg {
        position: absolute;
        right: 150px;
        top: 100px;
        width: 350px;
        height: 430px;
        background: rgba(253, 252, 252, 0.6);
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.1), 16px 16px 50px 0px rgba(255, 255, 255, 0.1), 64px 64px 91px 0px rgba(255, 255, 255, 0.09), 145px 145px 123px 0px rgba(255, 255, 255, 0.05), 257px 257px 146px 0px rgba(255, 255, 255, 0.01), 402px 402px 159px 0px rgba(255, 255, 255, 0);
        filter: blur(20px);
        padding: 10px;
      }

      .input-box {
        position: absolute;
        right: 150px;
        top: 100px;
        width: auto;
        height: auto;
        padding: 20px;
        background: $passlink-font-color-white2;
        color: $passlink-font-color-black;
        border-radius: 28px;
      }
    }
  }
}</style>
